body{
  background: url("./assets/background.svg");
  background-size: cover;
}

.navbar{
  height:80px;
  margin-bottom: 5px;
  box-shadow: 1px 1px 15px 3px #0002;
  display: flex;
  align-items: center; /* 垂直居中子元素 */
  padding-left: 15px;
}
@media  (max-width: 800px) {
  .navbar{
    height: 60px;
  }
}

.logoIcon{
  width: 20vw;
  height: 64px;
}

.content{
  display: flex;           /* 启用flexbox */
  flex-direction: row;     /* 子元素水平排列 */
  max-width: 1000px;
  margin: auto auto;
}
.loading{
  display: flex;
  height: 80vh;
  justify-content: center;
  align-items: center;
}

.wallpaper-sector::-webkit-scrollbar {
  display: none;
}
.wallpaper-list {
  display: flex;
  flex-wrap: wrap;
}
.page-number-input{
  margin: 5px;
}
.page-number-input input {
  width: 50px;
  text-align: center;
}
.page-number-input span{
  margin-left: 5px;
}

/* 移除遮罩 */
.ant-image-mask {
  display: none !important;
}

.wallpaper-preview{
  cursor: pointer;
  position: relative;
}

.image-preview{
  transition: box-shadow 0.5s ease;
}
.image-preview:hover{
  box-shadow: 1px 1px 5px 2px dimgray;
}


.wallpaper-preview > .wallpaperButtonDiv > .wallpaperOpButton{
  opacity: 0;
  transition: opacity 0.3s, color 0.3s; /* 将过渡效果应用于透明度和颜色 */
}

.wallpaper-preview:hover > .wallpaperButtonDiv > .wallpaperOpButton{
  opacity:1;
}

.wallpaperOpButton{
  color: #fff;
  padding: 5px 10px;
  margin: 5px;
}

.wallpaperOpButton:hover{
    color: deepskyblue;
}
.wallpaperOpButtonAlert:hover{
  color: orangered !important;
}

@media  (max-width: 600px) {
  .wallpaperOpButton{
    font-size: 8px;
    padding: 2px 4px;
    margin: 2px;
  }
}

.wallpaperNameBanner{
  opacity: 0;
  transition: opacity 0.3s;
}
.wallpaper-preview:hover > .wallpaperNameBanner{
  opacity:1;
}
.wallpaperStatusBanner{
  opacity: 1;
  transition: opacity 0.3s;
}
.wallpaper-preview:hover > .wallpaperStatusBanner{
  opacity: 0;
}

.wallpaperDetailDisplay{
    margin: 50px;
}
@media  (max-width: 1200px) {
  .wallpaperDetailDisplay{
    margin: 10px;
  }
}
.wallpaperDetailSection{
  margin: 50px;
}
@media  (max-width: 1200px) {
  .wallpaperDetailSection{
    margin: 10px;
  }
}

.wallpaperDetailButton {
  margin: 10px;
}
@media  (max-width: 1000px) {
  .wallpaperDetailButton{
    margin: 2px;
  }
}
.wallpaperDetail{
  font-size: 20px;
}
@media  (max-width: 1000px) {
  .wallpaperDetail{
    font-size: 14px;
  }
}